// 引入变量
@import "./variable";

// 全局样式
html,body{
  height: 100%;
}
body{
  padding-bottom: env(safe-area-inset-bottom);
}
#app{
  height: 100%;
  position: relative;
  overflow: hidden;
}
body {
  color: #333;
  background: #ebeced;
  overflow: hidden;
  a{
    color: #333;
  }
}
// 轉場動畫
.child-view {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 44px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all .6s cubic-bezier(.55,0,.1,1);
  -webkit-transition: all .6s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
// 限制html的font-size最大值
@media (min-width: 560px) {
  html {
    font-size: 29.8133px !important;
  }
}
// 头部组件
#header.app-header{
  .left-arrow{
    &:before{
      border-color: #fff;
    }
  }
}
// 修改Toast组件大小
.toast-big{
  .weui-toast{
    width: 121px !important;
    height: 121px !important;
    min-height: auto;
  }
}
.toast-normal{
  .weui-toast{
    width: auto !important;
    min-height: auto;
  }
  .weui-toast_text .weui-toast__content{
    padding: getRem(20) getRem(30);
    font-size: getRem(28);
  }
}
// 记录列表
.record-list {
  .vux-no-group-title {
    &:before {
      border-top: 0;
    }
    margin-top: 0;
  }
}
.application-list{
  .vux-tab-wrap{
    .vux-tab-item{
      flex: 0 0 20%;
    }
  }
}
.todo-list{
  .vux-tab-wrap{
    .vux-tab-item{
      flex: 0 0 20%;
    }
  }
}
.application-list, .todo-list{
  .vux-tab-wrap{
    position: absolute;
    top: 44px;
    width: 100%;
    z-index: 1;
    .vux-tab{
      background: #ebeced;
    }
    .vux-tab-item{
      font-weight: bold;
      background: transparent;
    }
  }
  .vux-slider{
    height: 100%;
    .vux-swiper-item{
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      background: #fff;
    }
  }
}
// x-textarea 自定義樣式
.vux-x-textarea{
  .weui-textarea{
    color: #333;
    font-size: getRem(28);
    height: getRem(224);
    &::placeholder{
      color: #ddd;
    }
  }
  .weui-textarea-counter{
    font-size: getRem(28);
  }
}
// 選擇圖片或領導
#app .select-images-list{
  // flex-wrap: wrap;
  margin-left: -(getRem(32));
  // align-items: start;
  padding-bottom: getRem(20);
  // box-align: start;
  .vux-flexbox-item{
    flex: 0 0 getRem(99);
    margin-bottom: getRem(20);
    margin-left: getRem(32) !important;
    position: relative;
    img{
      display: block;
      // width: getRem(96);
      height: getRem(100);
      width: 100%;
    }
  }
  .img-box{
    width: 100%;
    height: getRem(99);
    border: .5px solid #ccc;
    border-radius: getRem(10);
    overflow: hidden;
  }
  .remove-icon{
    display: block;
    width: getRem(36);
    height: getRem(36);
    position: absolute;
    right: -(getRem(22));
    top: -(getRem(18));
    background: url(./assets/images/remove-icon.png) no-repeat center center;
    background-size: getRem(36) getRem(36);
  }
  .name{
    margin-top: getRem(10);
    line-height: getRem(28);
    font-size: getRem(24);
    color: #ccc;
    text-align: center;
  }
  .select-img{
    border: 0;
    flex: 0 0 getRem(100);
    height: getRem(100);
    background-size: getRem(100) getRem(100) !important;
    input[type="file"]{
      opacity: 0;
      display: block;
      width: getRem(100);
      height: getRem(100);
    }
  }
}
.select-images-list{
  .select-img{
    background: url(./assets/images/select-img.png) no-repeat;
  }
}
// 選擇審批人或抄送人組件
.select-person{
  background: #fff;
  padding-left: 15px;
  &:before{
    border-color: #e6e6e6;
  }
  .title{
    font-size: getRem(28);
    line-height: 1;
    padding: getRem(32) 0;
  }
}
// 必填項
.require-item{
  color: #d91616;
  font-weight: normal;
}
// 請假申請信息填寫
// .write-askleave{
//   .scroll-box{
//     position: relative;
//     z-index: 30;
//   }
// }
.ask-leave-info, write-rebate{
  .apply-reason{
    .weui-textarea{
      height: getRem(100);
    }
  }
}
.none-bottom-border{
  .weui-cells{
    &:after{
      border-bottom: 0;
    }
  }
}
.vux-no-group-title{
  margin-top: 0 !important;
}
// 駁回彈窗
.turndown-confirm.type-text{
  .weui-dialog__bd{
    padding: 0 getRem(38) getRem(46);
  }
  .weui-dialog__hd{
    text-align: left;
    padding-left: getRem(38);
  }
}
.turndown-confirm{
  &.turndown-alert{
    .weui-dialog__bd{
      padding: getRem(15) getRem(38) getRem(30);
      min-height: auto;
      line-height: getRem(50);
    }
  }
  .weui-dialog{
    border-radius: getRem(20);
  }
  .weui-dialog__hd{
    line-height: getRem(80);
    padding:0;
    text-align: center;
    strong{
      font-size: getRem(32);
    }
  }
  .weui-dialog__bd{
    padding: getRem(15) getRem(38) 0;
  }
  .weui-dialog__ft{
    line-height: getRem(88);
  }
  .weui-dialog__btn{
    color: #777;
    font-size: getRem(28);
  }
  .weui-dialog__btn_primary{
    color: #1788fb;
  }
  .textarea{
    background: #ededed;
  }
  textarea{
    background: #ededed;
    &::placeholder{
      color: #bbb !important;
    }
  }
}
// 申請信息組件
.apply-info{
  .weui-cells:last-child:after{
    border: 0;
  }
}
// 针对tab切换动画进行优化
.todo-list{
  .vux-swiper-item{
    transition: all .5s ease 0s !important;
    -webkit-transition: all .5s ease 0s !important;
    overflow-scrolling: touch !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
// 加载中
.loading-box{
  text-align: center;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  font-size: getRem(28);
  div{
    width: 100%;
  }
  .vux-spinner svg{
    width: getRem(36);
    height: getRem(36);
    margin-top: getRem(8);
  }
}
// 滚动盒子
.scroll-box{
  padding-top: getRem(20);
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
// 修改调整头部返回按钮icon位置
.vux-header .vux-header-left .left-arrow{
  top: -6px !important;
}
// 合作申請填寫
.rebate-textarea{
  .weui-textarea::placeholder{
    font-weight: bold !important;
  }
}
// 选择抄送人
.select-person-list{
  .list{
    .weui-cells{
      &:before{
        border: 0;
      }
    }
  }
  // 调整取消字体
  .weui-search-bar__cancel-btn{
    font-size: getRem(28);
    line-height: getRem(64);
  }
  .weui-search-bar__box{
    .weui-icon-clear,.weui-icon-search{
      line-height: getRem(64);
    }
    .weui-search-bar__input{
      display: block;
      padding: 0;
      height: getRem(64);
      line-height: getRem(64);
    }
  }
  .weui-cells.vux-search_show{
    display: block !important;
  }
  .vux-label,.weui-cell__ft{
    font-size: getRem(28);
  }
  .vux-cell-bd{
    padding-left: 38px;
    p{
      line-height: 20px;
    }
  }
  .weui-cell__hd{
    position: absolute;
    top: 50%;
    margin-top: -15px;
    img{
      display: block;
    }
  }
  .vux-label{
    line-height: 24px;
  }
}
// 提交成功msg
.done-msg{
  padding-top: getRem(60);
  padding-bottom: getRem(30);
  margin-top: getRem(20);
  background: #fff;
  .success-btn{
    display: block;
    width: 100%;
    line-height: getRem(80);
    color: #fff;
    font-size: getRem(32);
    background-image: linear-gradient(194deg,
      #fa5864 0%,
      #fc476d 100%),
    linear-gradient(
      #d91616,
      #d91616);
    background-blend-mode: normal,
      normal;
      border-radius: getRem(10);
  }
  .title{
    color: #333;
    font-size: getRem(40);
    margin-bottom: getRem(10);
  }
  p{
    font-size: getRem(32);
  }
}
// 加载中彈窗
.vux-loading{
  .weui-toast{
    width: 130px;
    height: 130px;
    min-height: auto;
  }
}
// .input-error{
//   display: block;
//   width: getRem(40);
//   height: getRem(40);
//   position: absolute;
//   top:16px;
//   right:0;
//   background: url(./assets/images/icon-status-error.png) no-repeat;
//   background-size: getRem(40) getRem(40);
// }
// 主頁背景
// #initiate-application{
//   .bg-img{
//     position: fixed;
//     top: 0;
//     z-index: -1;
//     width: 100%;
//     height: getRem(311);
//     background: url(/static/images/init-app-bg.png) no-repeat center center;
//     background-size: 100% getRem(311);
//   }
// }
// 解決XTextarea不太靈敏的問題
.weui-textarea, textarea{
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
// 請假申請日期選擇樣式
.date-pciker{
  .weui-cell__ft{
    text-align: left;
  }
  .vux-cell-placeholder{
    color: #ddd;
  }
  .vux-cell-value{
    color: #000;
  }
  .weui-cell_access .weui-cell__ft:after{
    right: 10px;
  }
}
// 请假申请日期选择器标题
.dp-container{
  .dp-header .dp-item{
    color: #333;
  }
}
